import React, {PropsWithChildren, useState} from 'react'
import {ScrollView, View} from "@tarojs/components";
import {ActionSheet, Button, Cell, CellGroup, SearchBar} from "@nutui/nutui-react-taro";
import styles from "./SingleSelectableListActionSheet.module.sass"

export interface SingleSelectableListActionSheetProps<Key> extends PropsWithChildren {
    value: Key
    visible: boolean
    onCancel: () => void
    onChange: (value: Key) => void
    options: {
        key: Key
        label: string
    }[]
}

const SingleSelectableListActionSheet = <Key, >(props: SingleSelectableListActionSheetProps<Key>) => {
    const [keyword, setKeyword] = useState("")
    return <>
        <ActionSheet visible={props.visible}
                     onCancel={props.onCancel}>
            <ScrollView style={{height: 500}} scrollY>
                <View className={styles.actionHeader}>
                    <SearchBar placeholder={"搜索"} value={keyword} onChange={value => setKeyword(value.trim())}
                               right={<Button size={"small"} onClick={() => {
                                   props.onCancel()
                               }} type={"primary"}>确认</Button>}/>
                </View>
                <CellGroup divider={false}>
                    {props.options.filter(it=>!keyword || it.label.includes(keyword)).map(option => {
                        return <Cell className={option.key === props.value ? styles.activeCell : undefined}
                                     key={option.key + ""} onClick={() => {
                            props.onChange(option.key)
                            props.onCancel()
                        }} style={{
                            textAlign: "center",
                            alignItems: "center",
                            justifyContent: "center"
                        }}>{option.label}</Cell>
                    })}
                </CellGroup>
            </ScrollView>
        </ActionSheet>
    </>
}

export default SingleSelectableListActionSheet


